<template>
  <scroll-view class="album_scroll" scroll-y @scrolltolower="handleToLower">
    <!-- swiper -->
    <view class="album_swiper">
      <swiper autoplay indicator-dots circular>
        <swiper-item v-for="item in banner" :key="item.id">
          <image mode="widthFix" :src="item.thumb"></image>
        </swiper-item>
      </swiper>
    </view>

    <!-- 列表 -->
    <view class="album_list">
      <navigator class="album_item" v-for="item in album" :key="item.id" :url="`/pages/album/index?id=${item.id}`">
        <view class="album_img">
          <image mode="aspectFill" :src="item.cover"></image>
        </view>
        <view class="album_info">
          <view class="album_title">{{ item.name }}</view>
          <view class="album_txt">{{ item.desc }}</view>
          <view class="album_button">
            <text class="album_attention">+ 关注</text>
          </view>
        </view>
      </navigator>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      params: {
        limit: 10,
        adult: false,
        first: 3,
        order: "hot",
        skip: 0,
      },
      banner: [],
      album: [],
      hasMore: true,
    };
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: "专辑",
    });
    this.getList();
  },
  methods: {
    getList() {
      this.request({
        url: "http://service.picasso.adesk.com/v1/wallpaper/album",
        data: this.params,
      }).then((res) => {
        let albumData = res.data.res;
        if (albumData.banner.length === 0) {
          this.hasMore = false;
          uni.showToast({
            title: "没有更多了",
            icon: "none",
          });
          return;
        }
        if (this.banner.length === 0) {
          this.banner = albumData.banner;
        }
        this.album = [...this.album, ...albumData.album];
      });
    },
    handleToLower() {
      console.log(1);
      if (this.hasMore) {
        this.params.skip += this.params.limit;
        this.getList();
      } else {
        uni.showToast({
          title: "没有更多了",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.album_scroll {
  height: calc(100vh - 36px);
}
.album_swiper {
  swiper {
    height: 326rpx;
    image {
      height: 100%;
    }
  }
}
.album_list {
  padding: 10rpx 0;
  .album_item {
    border-bottom: 1px solid #eee;
    padding: 20rpx 10rpx;
    display: flex;
    .album_img {
      flex: 1;
      image {
        height: 200rpx;
        width: 200rpx;
      }
    }

    .album_info {
      flex: 2;
      overflow: hidden;
      position: relative;
      color: #111;
      .album_title {
        padding-top: 10rpx;
        font-size: 30rpx;
        font-weight: 700;
      }

      .album_txt {
        padding-top: 10rpx;
        font-size: 22rpx;
        color: #666;
        // 显示一行
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .album_button {
        position: absolute;
        right: 0;
        bottom: 10rpx;
        border: 1rpx solid $color;
        height: 50rpx;
        width: 120rpx;
        text-align: center;
        text.album_attention {
          font-size: 24rpx;
          color: $color;
          line-height: 50rpx;
        }
      }
    }
  }
}
</style>
